<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-03-15 15:55:30
 * @LastEditors: jgg
 * @LastEditTime: 2022-01-06 15:54:55
-->

<template>
        <div class="headerlist" ref="headerlist">
            <div class="headerlist-box">
                <div class="left-search">
                    <slot name="searchHeader">
                        <div class="flex-header">
                            <el-form :model="searchForm" :inline="true" class="searchForm" ref="searchForm">
                                <slot name="emptySlot"></slot>
                                <template v-for="(item, index) in cloumn" :key="index">
                                    <slot :name="item.prop + 'Slot'"></slot>
                                    <el-form-item  :label="item.label+':'" :prop="item.prop" v-if="item.searchHeader">
                                        <el-input  clearable v-if="item.type === 'input' || !item.type" v-model="searchForm[item.prop]" :placeholder="'请输入'+item.label"></el-input>
                                        <el-select clearable v-else-if="item.type === 'select'" v-model="searchForm[item.prop]">
                                            <el-option
                                                v-for="(itemSel, indexSel) in item.selectList"
                                                :key="indexSel" 
                                                :label="itemSel[item.propList.label]" 
                                                :value="itemSel[item.propList.value]"> </el-option>
                                        
                                        </el-select>
                                        <el-date-picker 
                                            clearable 
                                            v-model="searchForm[item.prop]" 
                                            v-else-if="item.type === 'date' || item.type === 'daterange'" 
                                            :type="item.type" 
                                            placeholder="选择日期"
                                            @change="formatTime(item.prop, searchForm[item.prop], item.type)">
                                        </el-date-picker>
                                        <el-date-picker 
                                            clearable 
                                            v-model="searchForm[item.prop]" 
                                            v-else-if="item.type === 'datetime'"
                                            type="datetime" 
                                            placeholder="选择日期时间"
                                            @change="formatTime(item.prop, searchForm[item.prop], item.type)">
                                        </el-date-picker>
                                    </el-form-item>
                                    
                                </template>
                                <el-form-item>
                                    <el-button v-if="options.searchBtnShow" icon="el-icon-search" type="primary" @click="handelSearchForm">搜索</el-button>
                                    <el-button v-if="options.emptyBtnShow" icon="el-icon-close" @click="clearSearchForm" class="danger-btn">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </slot>
                </div>
                <div class="btnlist">
                    <slot name="btnHeader">
                        <el-button icon="el-icon-plus"  v-if="options.addShow" @click="handleAdd" class="success-btn">新增</el-button>
                    </slot>
                </div>
            </div>
        </div>
        <el-table
            :header-cell-style="{background: '#E8F0FE'}"
            :data="data" 
            :border="options.border" 
            :height="height" 
            :stripe="options.stripe" 
            v-loading="Loading"
            :row-key="options.rowKey"
            :tree-props="{children: options.treeChildren, hasChildren: options.hasChildren}"
            @selection-change="handleSelectionChange">
            <el-table-column
                v-if="options.selection"
                 align="center"
                type="selection"
                width="50">
            </el-table-column>
            <el-table-column
                :label="options.indexTitle"
                v-if="options.index"
                align="center"
                type="index"
                width="60">
            </el-table-column>
            <el-table-column
                v-for="(item, index) in cloumn"
                :key="index"
                :fixed="item.fixed?item.fixed:false"
                :prop="item.prop"
                :label="item.label?item.label:''"
                :width="item.width"
                :align="item.align?item.align:'center'">
                <template #default="scope">
                    <template v-if="item.children">
                        <el-table-column 
                            v-for="(itemChild, indexChild) in item.children"
                            :key="indexChild"
                            :fixed="itemChild.fixed?itemChild.fixed:false"
                            :prop="itemChild.prop"
                            :label="itemChild.label?itemChild.label:''"
                            :width="itemChild.width"
                            :align="itemChild.align?itemChild.align:'center'">
                            <template #default="scopeChild">
                                <slot v-if="itemChild.slot" :rows="scopeChild.row" :name="itemChild.prop"></slot>
                                <span v-else>{{scopeChild.row[itemChild.prop]}}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else>
                        <slot v-if="item.slot" :rows="scope.row" :name="item.prop"></slot>
                        <span v-else>{{scope.row[item.prop]}}</span>
                    </template>
                </template>
               
            </el-table-column>
            <el-table-column :width="options.handleWidth || 220" v-if="options.handleRowShow" label="操作" :align="options.operationAlign || 'center'">
                <template v-slot="scope">
                    <slot name="handleOther" :rows="scope"></slot>
                    <slot name="handleView" :rows="scope">
                        <el-button
                            v-if="!options.viewBtnHide"
                            :rows="scope.row"
                            icon="el-icon-view"
                            type="text"
                            @click="handleView(scope)">查看</el-button>
                    </slot>
                    <slot name="handleEdit" :rows="scope">
                        <el-button
                            v-if="!options.editBtnHide"
                            :disabled="scope.row.isEdit === 0"
                            :rows="scope.row"
                            icon="el-icon-edit"
                            type="text"
                            class="success-textbtn"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    </slot>
                    <slot name="handleDelete" :rows="scope">
                        <el-button
                            v-if="!options.deleteBtnHide"
                            :rows="scope.row"
                            icon="el-icon-delete"
                            type="text"
                            class="danger-textbtn"
                            @click="handleDelete(scope.row)">删除</el-button>
                    </slot>
                </template>
            </el-table-column>
        </el-table>
        <div ref="pagination">
            <el-pagination
                v-if="options.page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageParams.currPage"
                :page-size="pageParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageParams.total">
            </el-pagination>
        </div>
        
</template>
<script>
import { formatTimestamp } from '@/utils/common'
export default {
    props: {
        option: {type: Object, default: () =>{}, required: true},
        data: {type: Array, default: () =>[], required: true},
        loading: {type: Boolean, default: false, required: true},
        pageParams: {type: Object, default: () => {}, required: true},
        searchForms: {type: Object, default: () => {}, required: true},
        cloumn: {type: Array, default: () => [], required: true}
    },
    name: 'tables',
    emits: [
        'handleAdd',
        'handleEdit', 
        'handleView', 
        'handelDelete',
        'handelSearchForm', 
        'clearSearchForm', 
        'handleSizeChange', 
        'handleCurrentChange', 
        'handleSelectionChange'],
    data() {
        return {
            height: 'auto',
        }
    },
    mounted() {
        this.getHeight()
    },
    computed: {
        options() {
            return this.option
        },
        Loading() {
            return this.loading
        },
        searchForm() {
            return this.searchForms
        }
        
    },
    watch: {
        
    },
    methods: {
        getHeight() {
            this.$nextTick(() => {
                let topHeight = this.$refs['headerlist'].offsetHeight + 'px'
                let bottomHeight = this.$refs['pagination'].offsetHeight + 'px'
                this.height =  `calc(100% - ${topHeight} - ${bottomHeight})`
            })
        },
        // 新增回调
        handleAdd() {
            this.$emit('handleAdd')
        },
        // 编辑回调
        handleEdit(row) {
            this.$emit('handleEdit', row)
        },
        // 详情回调
        handleView(row) {
            this.$emit('handleView', row)
        },
        // 删除回调
        handleDelete(row) {
            this.$emit('handelDelete', row)
        },
        // 搜索表头
        handelSearchForm() {
            this.$emit('handelSearchForm', this.searchForm)
        },
        // // 清空表头
        clearSearchForm() {
            this.$refs['searchForm'].resetFields()
            this.$emit('clearSearchForm', this.searchForm)
        },
        // 页数切换
        handleSizeChange(val) {
            this.$emit('handleSizeChange', val)
        },
        // 页码切换
        handleCurrentChange(val) {
            this.$emit('handleCurrentChange', val)
        },
        // 格式化时间
        formatTime(prop, val, type) {
            this.searchForm[prop] = type === 'date'? formatTimestamp(val, 'yyyy-MM-dd') : formatTimestamp(val)
        },
        // 表格选择
        handleSelectionChange(val) {
            this.$emit('handleSelectionChange', val)
        }
    }
}
</script>

<style lang="scss">
    .headerlist {
        padding-bottom: 10px;
        .headerlist-box {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .left-search {
                flex: 1;
            }
            .btnlist {
                display: flex;
                justify-content: flex-end;
                margin-top: 5px;
                .el-button {
                    margin: 0 10px 10px 0;
                }
            }
            .searchForm {
                .el-form-item{
                    margin-top: 5px;
                    margin-bottom: 0!important;
                }
            }
        }
        .search-btn {
            margin-top: 5px;
            display: flex;
        }
    }
    .flex-header {
        display: flex;
        align-items: flex-start;
    }
    .el-pagination {
        padding: 10px 0 0;
        display: flex;
        justify-content: flex-end;
    }

</style>